<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" href="img/f.ico" mce_href="img/f.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/f.ico" mce_href="img/f.ico" type="image/x-icon">
    <link rel="bookmark" href="img/f.ico" mce_href="img/f.ico" type="image/x-icon">    
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/sticky-footer-navbar.css" type="text/css"
	rel="stylesheet">
<link href="css/index.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts.js" charset="utf-8"></script>

<title>深度搜索</title>
<style type="text/css">
	.unfold {
		color: #00acd6;
		cursor: pointer;
	}
	span{
		float: left;
		color: red;
		margin-top: 3px;
		font-size: 14px;
	}
	a .tag {
		float: left;
		font-size: 1rem;
		height: 1rem;
		line-height: 1rem;
		position: relative;
		border: 1px solid #efb9b9;
		color: #ef3f41;
		border-radius: .3rem;
		margin: 2px;
		text-decoration: none;
	}
</style>
</head>
<body>
	<!-- Static navbar -->
	<div class="navbar navbar-default" role="navigation" style="height: 40px;">
		<div class="container pull-left">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a href="../vSearch/index">
						<img src="img/deepSearch_logo_s.png" class="navbar-brand"/>
					</a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li>
							<a href="../vSearch/search?word=${keyword}">搜索</a>
						</li>
						<li>
						<li><a href="../htdocs?word=${keyword}">知识图</a></li>
						</li>
					</ul>
					<form class="navbar-form" action="/vSearch/search">
						<input type="text" class="form-control" style="width: 420px" id="word" name="word" placeholder="${keyword}">
						<button type="submit" class="btn btn-primary" style="width: 100px">搜索</button>
					</form>
				</div>
				<!--/.nav-collapse -->
				<div></div>
			</div>
			<!--/.container-fluid -->
		</div>
	</div>

	<div class="container">

		<!-- 左侧显示部分 -->
		<div id="result" class="col-lg-8" >
			<c:forEach items="${items}" var="item">

				<div class="result c-container" style="margin-left: 5%;">
					<div class="row">
						<%--class="t"--%>
						<h3  class = "col-md-9 col-sm-8" >
							<a href="${item.url}" target="_blank">${item.title}</a>
						</h3>
					<%--	<h3  class="col-md-3 col-sm-4">
							<a href="${item.url}">${item.tmp}</a>
						</h3>--%>
					</div>

					<%--<div class="c-abstract">${item.content}</div>--%>
					<div >

							<ul class="wrap">
								<li>
									<div class="content all-content" style="display: none;">
										<div class="c-abstract">${item.content}</div>
									</div>

									<div class="content part-content" style="height:42px;overflow: hidden;">
										<div class="c-abstract">${item.content}</div>
										<%--<b> ...</b>--%>
									</div>
                                    <div class="label">
                                             <span> 相关标签:</span>
                                        <c:forEach items="${item.tmp}" var="tmp" >
                                        <a href="search?word=${tmp}" target="_blank" class="tag">${tmp}</a>
                                        </c:forEach>
                                    </div>
									<div class="sign unfold" style = "display:inline">更多...</div>
								</li>
							</ul>

					</div>
				</div>

			</c:forEach>
		</div>
		<div id="content_right" class="cr-content col-lg-8"
			style="width: 32%; margin-top: 0%;">
			<div id="person1" style="height: 250px; width: 300px;margin-top: 10px;"></div>

			<div class="row" style="width: 100%" style="position:relative;">
				<div class="text-center">
					<div class="col-lg-9 text-center">
						<h4 class="section-heading">相关公众号</h4>
						<table class="table table-hover">
							<c:forEach items="${gzitems}" var="item" begin="1" end="16">
								<tr>
									<td align="left">
										<a target="_blank" href="">${item.name}</a>
									</td>
								</tr>
							</c:forEach>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="footer" class="col-lg-12">
		<div class="container">
			<p class="text-muted" style="float: right">数据合作 | 关于我们</p>
		</div>
	</div>
<script type="text/javascript">
	var doc = $(document);
	var win = $(window);
	// 多次使用, 缓存起来
	doc.on('click', '.unfold', function () {
		var unfold = $(this);
		if (unfold.text() !== '收起') {
			unfold.text('收起').siblings('.part-content').hide().siblings('.all-content').show();
			var panel = unfold.parent();
			var panelScroll = panel.offset().top + panel.height();
			var scrollHeight = doc.scrollTop() + win.height();
			var right = win.width() / 2 - 350 + 20 > 20 ? win.width() / 2 - 350 + 20 : 20;
			// 点击展开按钮时即判断是否出现收起按钮
			if (scrollHeight - panelScroll < 50) {
				unfold.addClass('fold-fix').css('right', right);
			}
			// 绑定在 scroll 事件上
			var cb = {
				onscroll: function() {
					var panelScroll = panel.offset().top + panel.height();
					var scrollHeight = doc.scrollTop() + win.height();
					var right = win.width() / 2 - 350 + 20 > 0 ? win.width() / 2 - 350 + 20 : 20;
					if (scrollHeight - panelScroll < 50 &&
							panel.offset().top - scrollHeight < -90 && unfold.text() !== '展开') {
						unfold.addClass('fold-fix').css('right', right);
					} else {
						changeStyle(unfold);
					}
					win.off("scroll", cb.onscroll);
					setTimeout(function() {
						win.on("scroll", cb.onscroll);
					}, 50);
				}
			};
			win.on("scroll", cb.onscroll);
		} else {
			var fold = $(this);
			changeStyle(fold);
			fold.text('更多').siblings('.part-content').show()
					.siblings('.all-content').hide();
		}
	});

	function changeStyle(i) {
		i.removeClass('fold-fix').css('right', '20px');
	}
	localStorage.setItem("name","${keyword}");
</script>
	<script type="text/javascript">
		/* 此处使用的是echarts2.0 */
		// 路径配置
		// var new_width=300; //你要固定的浏览器宽度
		//    var new_height=300; //你要固定的浏览器高度
		//    function resizewindow(){
		//      window.resizeTo(new_width,new_height);
		//    }
		// 		resizewindow();
		//  window.open ('ihelpdesk1.html', 'newwindow', 'height=300, width=300, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')

		require.config({
			paths : {
				echarts : 'http://echarts.baidu.com/build/dist'
			}
		});

		// 使用
		require([ 'echarts', 'echarts/chart/force' ], function(ec) {
			// 基于准备好的dom，初始化echarts图表
			var myChart = ec.init(document.getElementById('person1'));

			var option = {
				<%--title : {--%>
					<%--text : "${title}",--%>
					<%--//subtext: '以下内容来自微信公众平台',--%>
					<%--x : 'left',--%>
					<%--y : 'top',--%>
					<%--textStyle:{--%>
						<%--fontFamily : '微软雅黑'--%>
					<%--},--%>
					<%--textAlign : 'center'--%>
				<%--},--%>
				backgroundColor : 'white',
				tooltip : {
					trigger : 'item',
					formatter : '{a} : {b}',
					textAlign : 'center'
				},
				toolbox : {
					show : false,
					feature : {
						restore : {
							show : true
						},
						magicType : {
							show : true,
							type : [ 'force', 'chord' ]
						},
						saveAsImage : {
							show : true
						}
					}
				},
				legend : {
					x : 'center',
					y : 'top',
					data : [ '人物', '组织机构', '地点' , '技术名词'],
					orient : 'horizontal',
					textStyle:{
						fontFamily : '微软雅黑',
						color : 'black'
					}
				},
				noDataLoadingOption :{
					<%--text: ${tips},--%>
					effect:'spin',
					// effectOption : {
					//  			effect: {
					//      			n: 0 //气泡个数为0
					//  			}
					// },
					backgroundColor : 'whitesmoke'
				},
				series : [ {
					type : 'force',
					name : "关联关系",
					center : [ '50%', '50%' ],
					ribbonType : false,
					categories : [  {
						name : '关键词',
						itemStyle : {
							normal : {
								color : 'rgb(79,183,247)'
							}
						}
					},{
						name : '人物',
						itemStyle : {
							normal : {
								color : 'rgb(79,183,247)'
							}
						}
					}, {
						name : '地点',
						itemStyle : {
							normal : {
								color : 'rgb(98,95,122)'
							}
						}
					}, {
						name : '组织机构',
						itemStyle : {
							normal : {
								color : 'rgb(142,160,168)'
							}
						}
					} ,
						{
							name : '技术名词',
							itemStyle : {
								normal : {
									color : '#ff7f50'
								}
							}
						} ],
					itemStyle : {
						normal : {
							label : {
								show : true,
								textStyle : {
									color : 'black',
									// color : '#54544E',
									fontsize : '1.5rem',
									fontFamily : '微软雅黑'
								},
								formatter : '{b}',
								position : 'left'
							},
							nodeStyle : {
								brushType : 'both',
								borderColor : '#FFFFFF',
								borderWidth : 3
							},
						},
						emphasis : {
							label : {
								show : false
								// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
							},
							nodeStyle : {
								// r: 30
							},
							linkStyle : {}
						}
					},
					useWorker : false,
					minRadius : 20,
					maxRadius : 50,
					gravity : 1.1,
					scaling : 1.1,
					roam : 'move',
					nodes : ${nodes},
					links : ${links},
					textColor : 'black'
				} ]
			};
			// 为echarts对象加载数据
			myChart.setOption(option);
		});
	</script>

</body>